<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
  <link rel="stylesheet" href="static/semantic/semantic.min.css">
  <link rel="stylesheet" href="static/css/style.css">
  <script src="static/js/jquery.min.js"></script>
  <script src="static/semantic/semantic.min.js"></script>

</head>

<body>
  <div class="ui attached fixed borderless menu large">
    <div class="ui container">
      <div class="left menu">
        <a class="item brand"> LOGO </a>
        <a class="item"> 首页 </a>
        <a class="item"> 新手入门 </a>
        <a class="item"> 关于 </a>
      </div>
      <div class="right menu">

        <a class="item"> 注册 </a>
        <a class="item"> 登录 </a>
        <div class="item">
          <div class="ui icon input">
            <input type="text" placeholder="Search...">
            <i class="search link icon"></i>
          </div>
        </div>
        <div class="ui dropdown item">
          Language <i class="dropdown icon"></i>
          <div class="menu">
            <a class="item">English</a>
            <a class="item">Russian</a>
            <a class="item">Spanish</a>
          </div>
        </div>
        <div class="item">
          <div class="ui primary button">Sign Up</div>
        </div>
      </div>
    </div>
  </div>

  <div class="ui vertical segment" style="background: teal;padding-top: 100px;padding-bottom: 50px;">

    <div class="ui page grid">

      <div class="twelve wide column">
        <div class="introduction">
          <h1 class="ui inverted header">
            <span class="library transition visible" style="">Semantic UI </span>
            <b data-text="User Interface">User Interface</b>
            <span class="text">是网页开发语言。</span>
          </h1>
          <div class="ui hidden divider"></div>
          <a href="###" class="ui huge basic inverted teal download button">Download Now </a>
        </div>
        <div class="inverted advertisement">

        </div>
      </div>
      <div class="four wide column">
        <div class="ui card">
          <div class="content">
            <i class="right floated star icon"></i>
            <div class="header"> <img class="ui avatar image" src="steve.jpg"> Cute Dog</div>
            <div class="description">
              <a class="left floated time">1 Course </a>
              <a class="right floated time">10 Favor</a>
            </div>
          </div>
      
          <div class="extra content">
            <div class="fluid ui button">MINE</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ui vertical segment">


    <div class="ui center aligned page grid">

      <div class="row">
        <div class="twelve wide column">
          <h1 class="ui header">CARD列表</h1>
          <p>Semantic作为一款开发框架，帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。</p>
        </div>
      </div>

    </div>
    <div class="ui page grid">





      <div class="column">
        <div class="ui four doubling cards">
          <div class="card">
            <div class="image">
              <img src="steve.jpg">
            </div>
            <div class="content">
              <a class="header">Stevie Feliciano</a>
              <div class="meta"> <span class="date">Joined in 2014</span> </div>
              <div class="description">
                She likes to spend her time reading, running, and writing.
              </div>
            </div>
            <div class="extra content"> 
              
              <a> <i class="user icon"></i> 22 Friends </a>
              <div class="right floated ui mini  positive  button">
                  <i class="shop icon"></i>
                  Follow
              </div>
            </div>
          </div>
          <div class="card">
            <div class="image">
              <img src="steve.jpg">
            </div>
            <div class="content">
              <a class="header">Stevie Feliciano</a>
              <div class="meta"> <span class="date">Joined in 2014</span> </div>
              <div class="description">
                She likes to spend her time reading, running, and writing.
              </div>
            </div>
            <div class="extra content"> 
              <a> <i class="user icon"></i> 22 Friends </a>
              <div class="right floated ui mini  positive  button">
                  <i class="shop icon"></i>
                  Follow
              </div>
            </div>
          </div>
          <div class="card">
            <div class="image">
              <img src="steve.jpg">
            </div>
            <div class="content">
              <a class="header">Stevie Feliciano</a>
              <div class="meta"> <span class="date">Joined in 2014</span> </div>
              <div class="description">
                She likes to spend her time reading, running, and writing.
              </div>
            </div>
            <div class="extra content"> 
              <a> <i class="user icon"></i> 22 Friends </a>
              <div class="right floated ui mini  positive  button">
                  <i class="shop icon"></i>
                  Follow
              </div>
            </div>
          </div>
          <div class="card">
            <div class="image">
              <img src="steve.jpg">
            </div>
            <div class="content">
              <a class="header">Stevie Feliciano</a>
              <div class="meta"> <span class="date">Joined in 2014</span> </div>
              <div class="description">
                She likes to spend her time reading, running, and writing.
              </div>
            </div>
            <div class="extra content"> 
              <a> <i class="user icon"></i> 22 Friends </a>
              <div class="right floated ui mini  positive  button">
                  <i class="shop icon"></i>
                  Follow
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="ui vertical segment" style="background: white;">

    <div class="ui stackable very relaxed center aligned page grid">
      <div class="row">
        <div class="twelve wide column">
          <h1 class="ui header">CARD列表</h1>
          <p>Semantic作为一款开发框架，帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。</p>
        </div>
      </div>
      <div class="row">
        <div class="three wide column">
          <div class="item">
            <a class="ui tiny image">
              <img src="steve.jpg" class="ui circular image">
            </a>
            <div class="content">
              <a class="header">Stevie Feliciano</a>
              <div class="description">
                <p>Stevie Feliciano is a living in New York City. </p>
              </div>
            </div>
         
          </div>
        </div>
        <div class="three wide column">
          <div class="item">
            <a class="ui tiny image">
              <img src="steve.jpg" class="ui circular image">
            </a>
            <div class="content">
              <a class="header">Stevie Feliciano</a>
              <div class="description">
                <p>Stevie Feliciano is a living in New York City. </p>
              </div>
            </div>
          </div>
        </div>
        <div class="three wide column">
          <div class="item">
            <a class="ui tiny image">
              <img src="steve.jpg" class="ui circular image">
            </a>
            <div class="content">
              <a class="header">Stevie Feliciano</a>
              <div class="description">
                <p>Stevie Feliciano is a living in New York City. </p>
              </div>
            </div>
          </div>
        </div>
        <div class="three wide column">
          <div class="item">
            <a class="ui tiny image">
              <img src="steve.jpg" class="ui circular image">
            </a>
            <div class="content">
              <a class="header">Stevie Feliciano</a>
              <div class="description">
                <p>Stevie Feliciano is a living in New York City. </p>
              </div>
            </div>
          </div>
        </div>
        <div class="three wide column">
          <div class="item">
            <a class="ui tiny image">
              <img src="steve.jpg" class="ui circular image">
            </a>
            <div class="content">
              <a class="header">Stevie Feliciano</a>
              <div class="description">
                <p>Stevie Feliciano is a living in New York City. </p>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>
  </div>
  <div class="feature ui stripe vertical segment" style="padding: 40px;">
    <div class="ui three column equal height center aligned divided relaxed stackable page grid">
      <div class="row">
        <div class="column">
          <h2 class="ui icon header">50+ 注册用户 </h2>
          <p>用一个UI构架组件你所有的网站。在不同项目中分享你的UI</p>
          <div class="ui primary view-ui large button">浏览UI</div>
        </div>

        <div class="column">
          <h2 class="ui icon header">3000+ 课程数量 </h2>
          <p>此构架的唯一信仰：任何事情都是可变的</p>
          <a class="ui large button" href="http://learnsemantic.com/developing/customizing.html">集成向导</a>
        </div>

        <div class="column">
          <h2 class="ui icon header">3,800+ 播放次数 </h2>
          <p>Semantic UI 是一个<b>免费的开源项目</b>，已经在多个<a href="http://www.quirky.com" target="_blank">大</a>规模<a
              href="https://www.newrepublic.com" target="_blank">生产</a>环境中使用。 </p>
          <a href="https://github.com/Semantic-Org/Semantic-UI/issues" class="ui large button">访问Github</a>
        </div>
      </div>
    </div>
  </div>


  <div class="ui vertical segment" style="padding:30px; background: teal;">
    <div class="ui stackable divided relaxed page grid">
      <div class="eight wide column">
        <h3 class="ui inverted header">Help Make Semantic UI Better</h3>
        <p>Maintaining an open source UI library is no small task. Support for the continued development of Semantic
          UI comes directly from the community.</p>
        <form action="###" method="post" target="_top">
          <input type="hidden" name="cmd" value="_s-xclick">
          <input type="hidden" name="hosted_button_id" value="7ZAF2Q8DBZAQL">
          <button type="submit" class="ui teal button">现在捐赠</button>
        </form>
      </div>
      <div class="four wide column">
        <h5 class="ui teal inverted header">Contribute</h5>
        <div class="ui inverted link list">
          <a class="item" href="###" target="_blank">Translation
            Hub</a>
          <a class="item" href="###" target="_blank">Issue Tracker</a>
          <a class="item" href="###" target="_blank">CLA</a>
          <a class="disabled item">Create Themes</a>
        </div>
      </div>
      <div class="four wide column">
        <h5 class="ui teal inverted header">Semantic Network</h5>
        <div class="ui inverted link list">
          <a class="item" href="###">Legacy Docs</a>
          <a class="item" href="###">Learn Semantic</a>
          <a class="disabled item">Semantic Themes</a>
          <a class="disabled item">Semantic Layouts</a>
        </div>
      </div>
    </div>
  </div>
  <div class="ui center aligned inverted vertical segment" style="padding:5px;background-color: #666!important;">
    <a class="ui inverted">copyright</a>
  </div>
</body>

</html>